﻿<%@ Page Title="" Language="C#" MasterPageFile="~/site.master" AutoEventWireup="true" CodeFile="Product.aspx.cs" Inherits="Product" Culture="auto" UICulture="auto" %>

<%@ Register src="UserControls/UCProductsHistory.ascx" tagname="UCProductsHistory" tagprefix="uc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript" src="<%=ResolveUrl("~/Scripts/jquery.ae.image.resize.min.js") %>"></script>
    <script type="text/javascript">
        $(function () {
            //品牌目录
            $(".categories_inner .column").each(function () {
                if ($(this).find("div").length == 0) {
                    $(this).remove();
                }
            });
            updateCategories()
            $(".categories_collapse").live("click", function () {
                var categories = $(".categories");
                var iconDown = '<%=ResolveUrl("~/images/categories_collapse_down.jpg") %>';
                var iconUp = '<%=ResolveUrl("~/images/categories_collapse_up.jpg") %>';

                if (categories.height() != 16) {
                    //                    categories.empty().animate({ height: 16 }).append('<a class="categories_collapse btn" style="bottom:0;"><img src="' + icon + '" /></a>');
                    categories.animate({ height: 16 }, function () {
                        $(this).find('.categories_collapse').find('img').attr({ src: iconDown });
                    });
                }
                else {
                    //                    if (Brands.UpdateBrands()) {
                    //                        __doPostBack('UpdatePanel1', '');
                    //                    }
                    categories.animate({ height: 140 }, function () {
                        $(this).find('.categories_collapse').find('img').attr({ src: iconUp });
                    });
                }
            });


            //商品图片切换
            $(".thumb").click(function () {
                $(".thumb").removeClass("cur");
                $(this).addClass("cur");
                var img = $(this).find("img");
                $('<img/>').load(function () {
                    $("#bigpic").attr({ src: this.src });
                    $("#bigpic").aeImageResize({ height: 500, width: 500 }).show();
                    $("#bigpic").parent().attr({ "href": this.src });
                }).attr('src', img.attr("src"));
            });
            $(".prev").click(function () {
                if ($(".thumb.cur").prev().length > 0) {
                    $(".thumb.cur").prev().click();
                } else {
                    $(".thumb:last").click();
                }
            });
            $(".next").click(function () {
                if ($(".thumb.cur").next().length > 0) {
                    $(".thumb.cur").next().click();
                } else {
                    $(".thumb:first").click();
                }
            });
            $(".thumb:first").click();

            //历史
            $(".pic").find("img").aeImageResize({ height: 156, width: 156 });

            //显示&隐藏商品状态
            $(".product .pic").mouseenter(function () {
                $(this).find(".status").hide();
            }).mouseleave(function () {
                $(this).find(".status").fadeIn();
            });
        });

        $(window).load(function () {
            $('<img/>').load(function () {
                $("#bigpic").hide().attr({ src: this.src });
                $("#bigpic").aeImageResize({ height: 500, width: 500 }).fadeIn();
                $("#bigpic").parent().attr({ "href": this.src });
            }).attr('src', $(".thumb:first").find("img").attr("src"));
            $(".thumb:first").click();
        });

        //Updatepanel1 更新时重新调用carouFredSel jQuery插件
        function updateCategories() {
            $(".categories_inner").carouFredSel({
                width: 950,
                items: { visible: 5,
                    width: 190,
                    height: 140
                },
                auto: { pauseOnHover: "resume", duration: 700 },
                prev: { button: $(".categories_prev") },
                next: { button: $(".categories_next") }
            });
        }     
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true" EnableScriptLocalization="true" AsyncPostBackTimeout="36000">
    </asp:ScriptManager>
    <!--品牌分类-->
    <div class="categories block">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <ul class="categories_inner">
                    <li class="column">
                        <asp:Repeater ID="rptCategories" runat="server" OnItemCommand="rptCategories_ItemCommand">
                            <ItemTemplate>
                                <div><asp:LinkButton ID="lbtnCategory" runat="server" CommandName="CATEGORY_CHANGE" CommandArgument='<%#Eval("BrandID").ToString()%>' Text='<%#HttpUtility.HtmlEncode(Eval("BrandName").ToString())%>'></asp:LinkButton></div>
                                <%# ((Container.ItemIndex+1) % 3 == 0 )? "</li><li class='column'>" :""%>
                            </ItemTemplate>
                        </asp:Repeater>
                    </li>
                </ul>
            </ContentTemplate>
        </asp:UpdatePanel>
        <a class="categories_prev btn"></a><a class="categories_next btn"></a><a class="categories_collapse btn">
            <img src='<%=ResolveUrl("~/images/categories_collapse_up.jpg") %>' />
        </a>
    </div>
    <!--商品信息-->
    <div class="block padding10 margin5_tb clearfix b_202020">
        <div class="product_detail_left">
            <div class="bigpic_wrap">
                <a class="prev"></a>
                <div class="img_wrap">
                    <span></span>
                    <a class="bigpic_link" target="_blank"><img id="bigpic"/></a>
                </div>
                <a class="next"></a>
            </div>
            <ul class="thumbs clearfix" style="padding: 0 30px;">
                <asp:Repeater ID="rptPics" runat="server">
                    <ItemTemplate>
                        <li class='thumb <%# ((Container.ItemIndex+1) % 6 == 0 )? "last" :""%>'>
                            <img src='<%#ResolveUrl(Eval("Url").ToString())%>' width="77" height="77"/>
                        </li>
                    </ItemTemplate>
                </asp:Repeater>
            </ul>
        </div>
        <div class="product_detail_right">
            <div class="detail_info" style="font-size:14px;">
                <p><asp:Literal ID="literProductName" runat="server"></asp:Literal></p>
            </div>
            <div class="detail_info c_ffb400">
                <p style="line-height:20px;" class="clearfix">
                    <span class="float_l"><asp:Localize ID="Localize1" Text='<%$ Resources: ResourceGlobal, Product_Price  %>' runat="server"></asp:Localize>：</span>
                    <asp:Label ID="lblPrice" runat="server" CssClass="price float_l"></asp:Label>
                    <asp:Label ID="lblSalePrice" runat="server" CssClass="saleprice float_l" ForeColor="Red"></asp:Label>
                    <span class="float_r" style="font-size:20px;color:Red;"><asp:Literal ID="literStatus" runat="server"></asp:Literal></span>
                </p>
            </div>
            <div class="detail_info">
                <table>
                    <tr>
                        <td style="width:30%;"><asp:Localize ID="Localize2" Text='<%$ Resources: ResourceGlobal, Product_Size  %>' runat="server"></asp:Localize>:</td>
                        <td style="width:70%;">
                            <asp:Repeater ID="rptSizes" runat="server">
                                <ItemTemplate>
                                    <span class="size"><%#Container.DataItem %> </span>
                                </ItemTemplate>
                            </asp:Repeater>
                        </td>
                    </tr>
                    <tr>
                        <td><asp:Localize ID="Localize3" Text='<%$ Resources: ResourceGlobal, Product_Color  %>' runat="server"></asp:Localize>:</td>
                        <td>
                            <asp:Repeater ID="rptColor" runat="server">
                                <ItemTemplate>
                                    <span class="color"><%#Container.DataItem %> </span>
                                </ItemTemplate>
                            </asp:Repeater>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="detail_info">
                <p><asp:Localize ID="Localize4" Text='<%$ Resources: ResourceGlobal, Product_Description  %>' runat="server"></asp:Localize>:</p>
                <p>
                    <asp:Literal ID="literDesc" runat="server"></asp:Literal></p>
            </div>
            <div class="margin5_tb">
                <a href='<%=ResolveUrl("~/Products/"+this.GetQueryString("productID", false)+"/Buy")%>' class="buttons"><b></b><span><asp:Localize ID="Localize5" Text='<%$ Resources: ResourceGlobal, Button_SelectProduct  %>' runat="server"></asp:Localize></span><em></em></a>
            </div>
        </div>
    </div>
    <uc1:UCProductsHistory ID="UCProductsHistory1" runat="server" />
</asp:Content>

